<template>
	<view class="cart-pop">
		<view class="base">
			<view class="thumb-blank"><img :src="goodsThumb" alt=""></view>
			<view class="cart-info">
				<view class="price">￥{{price}}</view>
				<view class="stock">库存还剩{{stock}}件</view>
				<view class="specs">{{goodsAttrStr}}</view>
			</view>
		</view>
		<view class="attrs" v-for="(attr,attrIndex) of goodsAttr" :key="attrIndex">
			<view class="attr-tit">{{attr.name}}</view>
			<view class="attr-item flex">
				<view class="item" v-for="(attrChild,attrChildIndex) of attr.attr_list" :key="attrChildIndex" @tap="selectGoodsAttr(attr.id,attrChild.id)" :class="{actived:attrChild.checked}">{{attrChild.attr_value}}</view>
			</view>
		</view>
		<view class="flex flex-pack-justify flex-align-center quantity">
			<text class="quantity-tit">购买数量</text>
			<uni-number-box :min="1" :max="stock" @change="changeStore" :value="stocked"></uni-number-box>
		</view>
		<view class="flex btns">
			<view class="btn add-cart flex-1" @tap="settlement('addToCart')">加入购物车</view>
			<view class="btn go-buy flex-1" @tap="settlement('goBuy')">立即购买</view>
		</view>
		<tpf-icon class="pop-close-ico" :text="popConfig.closeIcon.text" :fontFamily="popConfig.closeIcon.fontFamily" @iconTap="closePop"></tpf-icon>
	</view>
</template>

<script>
import config from './tpl-cart-pop.js'
export default{
	name:"TpfCartPop",
	mixins:[config],
	props:{
		goodsId:{
			type:Number,
			default:0
		},
		stock:{
			type:Number,
			default:1
		},
		stocked:{
			type:Number,
			default:1
		},
		goodsThumb:{
			type:String
		},
		price:{
			type:[Number,String],
			default:"0.00"
		},
		goodsAttrStr:{
			type:String,
			default:"请选择"
		},
		goodsAttr:{
			type:Array,
			default:()=>{
				return []
			}
		}
	},
	data(){
		return {
			
		}
	},
	methods:{
		// 库存变化
		changeStore(e){
			this.$root.stocked = e;
		},
		closePop(){
			this.$emit("closePop","cart");
		},
		selectGoodsAttr(attr_id,attrChild_id){
			this.$root.selectGoodsAttr(attr_id,attrChild_id);
		},
		settlement(e){
			this.$emit("settlement",e);
		}
	},
	computed:{
		
	}
} 
</script>

<style lang="scss">
/* 购物车 */
.cart-pop{
	position:relative;
	background-color: $uni-bg-color-white;
	padding:10rpx;
}
.cart-pop .base{
	display: flex;
	margin-bottom:16rpx; 
} 
.cart-pop .base .thumb-blank{
	width: 30%;position:relative;
}
.thumb-blank img{
	max-width: 100%;
	position: absolute;
	left: 0; 
	bottom:0;
	border-width: 1px;;
	border-color: #e8e8e8;
	border-style: solid;
	padding:6rpx;
	box-sizing: border-box;
	background-color: $uni-bg-color-white;
	border-radius:3px;
}
.cart-pop .base .cart-info{
	flex: 1;
	margin-left: 10px;
	font-size: $uni-font-size-base;
}
.cart-pop .base .cart-info .price{
	font-size: $uni-font-size-base*1.2;
	color: $uni-text-color-red;
}
.pop-close-ico{
	position: absolute;
	top: 10rpx;
	right: 10rpx;
}
.attrs{
	font-size: $uni-font-size-base;
	padding-top:16rpx;
}
.attrs .attr-tit{
	font-size:$uni-font-size-base*1.1;
	border-left-width:3px;
	border-left-style: solid;
	border-left-color:$uni-text-color-red; 
	padding-left:10rpx;
	line-height: 100%;
	margin-bottom: 16rpx;
}

.attrs .attr-item .item{
	background-color: $uni-bg-color-grey;
	padding: 6rpx 10rpx;
	margin:0 16rpx 16rpx 0;
	border-radius: 6px;
	border-width: 1px;
	border-style: solid;
	border-color: $uni-bg-color-grey;
}
.attrs .attr-item .actived{
	background-color:$uni-bg-color-grey;
	color: #FF0036;
	border-color: #FF0036;
}
.quantity{
	font-size: $uni-font-size-base;
	margin-bottom: 20rpx;
}
.btns .btn{
	font-size:$uni-icon-size-sm;
	text-align: center;
	line-height:90rpx;
	color: $uni-text-color-white;
}
.add-cart{
	background-color: $uni-btn-bg-color-yellow;
}
.go-buy{
	background-color: $uni-btn-bg-color-red;
}
</style>
